<template>
	<div id="">
		<div id="login">
			<div id="login-one">
				<input type="" name="" id="" value="" placeholder="请输入手机号" v-model="phone" />
			</div>
			<div id="login-two">
				<div id="">
					<input type="" name="" id="" value="" placeholder="请输入密码" />
				</div>
				<div id="">
					<el-button id="button">获取验证码</el-button>
				</div>
			</div>
			<div id="">
				<van-button id="login-button" @click="login">登录</van-button>
			</div>
			<van-row>
				<van-col span="8" offset="2">切换账户</van-col>
				<van-col span="8" offset="5">新用户注册</van-col>
			</van-row>
			<van-row id="other">
				<van-col span="12" offset="9">其他账户登录</van-col>
			</van-row>
			<van-row id="ico">
				<van-col span="6" offset="2"><img src="../../../public/QQ.png"></van-col>
				<van-col span="7"><img src="../../../public/微信.png"></van-col>
				<van-col span="7"><img src="../../../public/微博.png"></van-col>
			</van-row>
			<van-row id="bottom">
				<van-col span="12" offset="7"><span>登录遇到问题？</span><span>需要帮助？</span></van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				list: []
			}
		},
		created() {

		},
		methods: {
			login() {
				console.log(this.phone)
				this.$store.dispatch('user/vuexLogin', this.phone)
					.then(e => {
						console.log(e.data.data)
						this.list = e.data.data
						localStorage.setItem('login', JSON.stringify(this.list))
						this.$router.push('/main')
					})
			}
		}
	}
</script>

<style>
	#login {
		width: 100vw;
		margin-top: 6vh;
	}

	#login #login-one {
		width: 100vw;
		height: 6vh;
	}

	#login #login-one input {
		width: 80vw;
		height: 4vh;
		/* margin-left: 10vw; */
		border: none;
		border-bottom: 2px solid #E6E8E7;
	}

	#login #login-one input::-webkit-input-placeholder {
		color: #E6E8E7;
	}

	#login #login-two {
		width: 100vw;
		height: 6vh;
		display: flex;
		margin-top: 2vh;
	}

	#login #login-two input {
		width: 49vw;
		height: 4vh;
		margin-left: 10vw;
		border: none;
		border-bottom: 2px solid #E6E8E7;
		margin-right: 1vw;
	}

	#login #login-two #button {
		width: 31vw;
	}

	#login #login-two input::-webkit-input-placeholder {
		color: #E6E8E7;
	}

	#login-button {
		width: 80vw;
		margin-left: 3vw;
		margin-top: 4vh;
	}

	.van-button--default {
		background: #000000;
		color: #FFFFFF;
		border-radius: 5px;
	}

	#other {
		margin-top: 20vh;
		color: #E6E8E7;
	}

	#ico {
		margin-top: 2vh;
	}

	#ico img {
		width: 10vw;
		height: 5vh;
	}

	#bottom {
		width: 100vw;
		margin-top: 9vh;
	}

	#bottom span:nth-child(2) {
		color: royalblue;
	}
</style>
